<template>
<view>
    <view>scroll-view纵向滚动</view>
    <scroll-view class="scroll-y" scroll-y="true">
       <view class="bg-blue item">A</view>
       <view class="bg-green item">B</view>
	   <view class="bg-red item">C</view>
	</scroll-view>
      <view>scroll-view横向滚动</view>
    <scroll-view class="scroll-x" scroll-x="true">
       <view class="bg-blue item2">Aaaaa</view>
	   <view class="bg-green item2">B</view>
	   <view class="bg-red item2">C</view>
	</scroll-view>
</view>
</template>


<script>
</script>

<style>
	.item {
		height: 200upx;
	}
	.item2 {
		height: 200upx;
		display: inline-block;/*子内容显示在一行*/
		width: 100%;
	}
	.bg-blue {
		background-color: #007AFF;
	}
	.bg-green {
		background-color: #4CD964;
	}
	.bg-red {
		background-color: #AA0000;
	}
	.scroll-y {
		height: 200upx;
	}
	.scroll-x {	
		white-space: nowrap; /*该滚动区域的子内容显示在一行*/
	}
</style>